
<script setup lang="ts">


import {onMounted, ref} from "vue";
import 'vue3-baidu-map-gl'
import { useRouter } from 'vue-router'



const router = useRouter()

const address = ref('')
onMounted(() => {
    const geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition((r: any) => {
        if (geolocation.getStatus() === 0) {
            //得到地址
            const point = r.point;
            const gc = new BMapGL.Geocoder();
            gc.getLocation(point, (rs: any) => {
                const addComp = rs.addressComponents;
                //地址匹配
                const roughAddress = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
                address.value = roughAddress;
                // 进行逆地理编码，获取更精确的地址信息
                const geoc = new BMapGL.Geocoder();
                geoc.getLocation(point, (rs: any) => {
                    const add = rs.address; // 更精确的地址信息
                    address.value = add;
                });
            });
            const map = new BMapGL.Map("map");
            map.centerAndZoom(point, 15);
            map.addOverlay(new BMapGL.Marker(point));
            map.centerAndZoom(point, 15);
            // 创建点标记
            var marker = new BMapGL.Marker(point);
            map.addOverlay(marker);
            // 创建信息窗口
            var opts = {
                width: 200,
                height: 100,
                title: '力行楼'
            };
            var infoWindow = new BMapGL.InfoWindow('地址：云南省昆明市云南大学呈贡校区实训汇报', opts);
            // 点标记添加点击事件
            marker.addEventListener('click', function () {
                map.openInfoWindow(infoWindow, point); // 开启信息窗口
            });

        }
    });
})

const goToHome = () =>{
    router.push('/Index')
}
</script>

<template>
    <div class="relative">
        <div class="topBar z-10">
            地图详情页面
        </div>
        <button class="absolute top-2.5 left-4 z-10 " @click="goToHome">
            <font-awesome-icon icon="fa-solid fa-caret-left  " size="xl" />
        </button>
        <div id="map" class=" h-700"></div>
    </div>
</template>

<style>
#map {
    width: 100%;
}

.h-700 {
    height: 700px;
}
</style>



<!--<template>-->
<!--    <div id="container"></div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { BLocation } from 'vue3-baidu-map-gl'-->
<!--import { nextTick, onMounted } from 'vue'-->
<!--onMounted(() => {-->
<!--    nextTick(() => {-->
<!--        initMap()-->
<!--    })-->
<!--})-->

<!--const initMap = () => {-->
<!--    const geolocation = new BMapGL.Geolocation();-->
<!--    var map = new BMapGL.Map('container');-->
<!--    var latitude-->
<!--    var longitude-->
<!--    navigator.geolocation.getCurrentPosition(-->
<!--        function (position) {-->
<!--            // 获取到地理位置信息-->
<!--            latitude= position.coords.latitude;-->
<!--            longitude= position.coords.longitude;-->

<!--            // 处理获取到的经纬度信息-->
<!--            console.log("Latitude: " + latitude + ", Longitude: " + longitude);-->
<!--        },-->
<!--        function (error) {-->
<!--            // 处理错误情况-->
<!--            console.error("Error getting geolocation: " + error.message);-->
<!--        }-->

<!--        )-->

<!--    var point = new BMapGL.Point(latitude,longitude);-->
<!--    map.centerAndZoom(point, 15);-->
<!--    // 创建点标记-->
<!--    var marker = new BMapGL.Marker(point);-->
<!--    map.addOverlay(marker);-->
<!--    map.enableScrollWheelZoom(true);-->
<!--    // 创建信息窗口-->
<!--    var opts = {-->
<!--        width: 200,-->
<!--        height: 100,-->
<!--        title: '故宫博物院'-->
<!--    };-->
<!--    var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);-->
<!--    // 点标记添加点击事件-->
<!--    marker.addEventListener('click', function () {-->
<!--        map.openInfoWindow(infoWindow, point); // 开启信息窗口-->
<!--    });-->
<!--}-->

<!--</script>-->

<!--<style>-->
<!--#container {-->
<!--    overflow: hidden;-->
<!--    width: 500px;-->
<!--    height: 500px;-->
<!--    margin: 0;-->
<!--    font-family: "微软雅黑";-->
<!--}-->
<!--</style>-->
